{% extends 'myhome/index.html'%}
{% block title %}
<title>个人信息</title>
{% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/myhome/css/bootstrap.min.css" />
<link rel="stylesheet" href="/static/myhome/css/bootstrap-fileinput.css" />
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/infstyle.css" rel="stylesheet" type="text/css">

{% endblock %}

{% block js %}
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
{% endblock %}


{% block con %}
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
						</div>
						<hr/>

						<!--头像 -->
						<div class="user-infoPic">

							<div class="filePic">
								<input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
								<img class="am-circle am-img-thumbnail" src="{{ uinfo.pic_url }}" alt="" />
							</div>

							<p class="am-form-help">头像</p>

							<div class="info-m">
								<div><b>用户名：<i>{{ uinfo.username }}</i></b></div>
								<div class="u-level">
									<span class="rank r2">
							             <s class="vip1"></s><a class="classes" href="#">铜牌会员</a>
						            </span>
								</div>
								<div class="u-safety">
									<a href="safety.html">
									 账户安全
									<span class="u-profile"><i class="bc_ee0000" style="width: 60px;" width="0">60分</i></span>
									</a>
								</div>
							</div>
						</div>

						<!--个人信息 -->
						<div class="info-main">
				<form action="{% url 'myhome_myinfo_information_edit' uinfo.id %}" method="post" enctype="multipart/form-data" class="am-form tpl-form-line-form">
                        {% csrf_token %}
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">用户名</label>
                            <div class="am-u-sm-9">
                                <input type="text" name="username" value="{{ uinfo.username }}" class="tpl-form-input"  placeholder="请输入用户名">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">密码</label>
                            <div class="am-u-sm-9">
                                <input type="password" name="password"   class="tpl-form-input"  placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">手机号</label>
                            <div class="am-u-sm-9">
                                <input type="text" name="phone"  value="{{ uinfo.phone }}" class="tpl-form-input"  placeholder="请输入手机号">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">邮箱</label>
                            <div class="am-u-sm-9">
                                <input type="text" name="email"  value="{{ uinfo.email }}" class="tpl-form-input"  placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">年龄</label>
                            <div class="am-u-sm-9">
                                <input type="text" name="age"  value="{{ uinfo.age }}" class="tpl-form-input"  placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">性别</label>
                            <div class="am-u-sm-9">
                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" {% if uinfo.sex == '0' %} checked {% endif %} value="0"> 女
                                </label>
                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" {% if uinfo.sex == '1' %} checked {% endif %} value="1"> 男
                                </label>
                            </div>
                        </div>
                        
                        <div class="am-form-group">
                            <label for="user-weibo" class="am-u-sm-3 am-form-label">
                                头像
                            </label>
                            <div class="am-u-sm-9">
                                <div class="h4">图片预览</div>
                                <div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">
                                    <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
                                        <img id='picImg' style="width: 100%;height: auto;max-height: 140px;" src="{{ uinfo.pic_url }}" alt="" />
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
                                    </div>
                                    <div>
                                        <span class="btn btn-primary btn-file">
                                            <span class="fileinput-new">选择文件</span>
                                            <span class="fileinput-exists">换一张</span>
                                            <input type="file" name="pic_url" id="picID" accept="image/gif,image/jpeg,image/x-png" />
                                        </span>
                                        <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">移除</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                       
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button></div>
                        </div>
                    </form>
						</div>

					</div>

				</div>

			</div>

			<aside class="menu">
				<ul>
					<li class="person">
						<a href="index.html">个人中心</a>
					</li>
					<li class="person">
						<a href="{% url 'myhome_myinfo_information' %}"">个人资料</a>
						<ul>
							<li class="active"> <a href="{% url 'myhome_myinfo_information' %}">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li> <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li><a href="{% url 'myhome_myinfo_order' %}">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的资产</a>
						<ul>
							<li> <a href="coupon.html">优惠券 </a></li>
							<li> <a href="bonus.html">红包</a></li>
							<li> <a href="bill.html">账单明细</a></li>
						</ul>
					</li>

					<li class="person">
						<a href="#">我的小窝</a>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
							<li> <a href="foot.html">足迹</a></li>
							<li> <a href="comment.html">评价</a></li>
							<li> <a href="news.html">消息</a></li>
						</ul>
					</li>

				</ul>

			</aside>
		</div>

    <script src="/static/myhome/js/bootstrap-fileinput.js"></script>
{% endblock %}
